<template>
  <div class="dashboard">
    <h1>仪表盘</h1>
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card>
          <template #title>
            <span>
              <UserOutlined />
              用户总数
            </span>
          </template>
          <h2>1,234</h2>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <template #title>
            <span>
              <ShoppingCartOutlined />
              订单总数
            </span>
          </template>
          <h2>5,678</h2>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <template #title>
            <span>
              <DollarOutlined />
              销售额
            </span>
          </template>
          <h2>¥89,012</h2>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <template #title>
            <span>
              <LineChartOutlined />
              增长率
            </span>
          </template>
          <h2>12.3%</h2>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import {
  UserOutlined,
  ShoppingCartOutlined,
  DollarOutlined,
  LineChartOutlined
} from '@ant-design/icons-vue'
</script>

<style scoped>
.dashboard {
  padding: 24px;
}

.ant-card {
  text-align: center;
}

h2 {
  margin: 0;
  color: #1890ff;
}
</style> 